<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
    <style>
        select {
            width: 200px;
            height: 30px;
            text-align: center;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <select id="province">
      <option value="">-- 省份 --</option>
    </select>
    <select id="city">
      <option value="">--城市--</option>
    </select>
    <select id="area">
      <option value="">--区/县--</option>
    </select>

    <script>
        let province = document.querySelector("#province");
        let city = document.querySelector("#city");
        let area = document.querySelector("#area");

        fetch("./city.json")
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                // console.log(data);
                for (let k in data) {
                    province.innerHTML += `<option value="${k}">${k}</option>`;
                }
                province.addEventListener("change", function() {
                    city.innerHTML = `<option value="">城市</option>`;
                    area.innerHTML = `<option value="">区县</option>`;
                    for (let k in data) {
                        // console.log(data[key]);
                        if (k == province.value) {
                            for (let k1 in data[k]) {
                                city.innerHTML += `<option value="${k1}">${k1}</option>`;
                            }
                        }
                    }
                });

            })
            .catch(function(error) {
                console.log(error);
            });
    </script>
</body>

</html>